<template>
  <div>
    <div class="container">
      <BlogHeader/>
      <BlogNav id="header-nav"/>
      <GoodArticle v-show="showGood"/>
      <main role="main" >
        <BlogMain :list="list"/>
      </main>
    </div>
    <BlogFotter />
  </div>
</template>
<script>
import { headroom } from 'vue-headroom'
import BlogHeader from '~/components/blog/BlogHeader'
import BlogNav from '~/components/blog/BlogNav'
import BlogDisplay from '~/components/blog/BlogDisplay'
import GoodArticle from '~/components/blog/GoodArticle'
import BlogFotter from '~/components/blog/BlogFotter'
import BlogMain from '~/components/blog/blog-main/BlogMain'
import api from '@/api'

export default {
  name: 'homeblog',
  title: '博客首页',
  components: {
    BlogHeader,
    BlogNav,
    BlogDisplay,
    GoodArticle,
    BlogFotter,
    BlogMain,
    headroom
  },
  created() {
    this.newSearch()
  },
  data() {
    return {
      type: '全部',
      loading: false,
      search: '',
      list: [],
    }
  },
  methods: {
    serachKey(keywords) {
      this.search = keywords
      this.newSearch()
    },
    newSearch() {
      this.loading = true
      this.$get(this.$paramsConnect(api.article, {
        title: this.search
      })).then(res => {
        console.log('res:', res.data.data);
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
  },
  computed: {
    showGood() {
      const { params: { type }, query: { search } } = this.$route
      return type === 'all' && !search
    }
  }
}
</script>
<style lang='scss'>
  @import '~/assets/blog.scss'
</style>
